<template>
    <div>
        <div class="my_id">
            <div class="myid_left">
                <img src="/usericon/personal_tx001.png" >
                <div class="usernick">
                    <p>昵称 : 雪菲 <nuxt-link to="" style="font-size:14px;color:#5141ED;margin-left:20px;font-weigth:400">实名认证</nuxt-link></p>
                    <p>1564464464 <span style="font-size:13px">(广告主)</span></p>
                    <p style="font-size:12px;font-weigth=400;color=#666">资料完成度</p>
                </div>
            </div>
            <div class="myid_right">
                <p>专属客服 : 小米</p>
                <p>QQ号码 : 88855556</p>
                <p>手机号码 : 15987977897</p>
            </div>
            <div class="userfunds">
                <div>
                    <p>账户余额</p>
                    <p>15566.00元</p>
                    <button>提现</button>
                </div>
                <div>
                    <p>账户余额</p>
                    <p>15566.00元</p>
                    <nuxt-link to="">查看详情</nuxt-link>
                </div>
                <div>
                    <p>押金</p>
                    <p>1599.00元</p>
                    <nuxt-link to="">查看详情</nuxt-link>
                </div>
            </div>
        </div>
        <div class="oder">
            <div v-for="(item,index) in oder" :key="index" style="background:url('/usericon/personal_lmage02.png')">
                {{item.title}}
            </div>
        </div>
        <div class="myCollection">
            <div class="myCollection_top">
                <span>我的收藏</span>
                <div>
                    <p>短视频营销(0)</p>
                    <p>直播营销(0)</p>
                    <p>直播营销(0)</p>
                    <p>直播营销(0)</p>
                    <p>直播营销(0)</p>
                </div>
            </div>
            <div class="myCollection_content">
                <div class="collitem" v-for="(item,index) in collectionlist.weixin" :key="index">
                    <div><img src="/usericon/personal_tx001.png"></div>
                    <div>
                        <p>{{item.goods_title}}</p>
                        <p>粉丝量: <span class="red">{{item.fans_num}}</span></p>
                        <p class="color666 font14">领域: {{item.filed_name}}&nbsp;&nbsp;地区: {{item.region_name}}</p>
                    </div>
                    <div>
                        <p class="font14">{{item.theme_name}}</p>
                        <p class="color666 font14" v-for="(item_info,i) in item.price_info" :key="i">{{item_info.priceclassify_name}}: <span style="color:#000"> {{item_info.price}}</span></p>
                    </div>
                    <div class="color666 font14">
                        简介:{{item.goods_title_about}}
                    </div>
                    <div>
                        <p class="font14 color666">资讯客服</p>
                        <p class="buybtn">立即购买</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {gettoken} from '@@/assets/commen.js'
export default {
    layout:'user',
    data() {
        return {
            oder:[
                {title:'全部订单',count:12},
                {title:'未付款',count:12},
                {title:'执行中',count:12},
                {title:'已完成',count:12}
            ],
            collectionlist:'',
        }
    },
    mounted() {
        // gettoken().then(val=>{
        //     return this.$axios.post('/getCollection',{
        //         modular_type:''
        //     },{headers:{'Authorization':'Bearer'+val}})
        // }).then(res => {
        //     console.log(res.data.data)
        //     this.collectionlist = res.data.data
        // }).catch(err=>{
        //     console.log(err.response)
        // })
    },
}
</script>

<style scoped>
/* 用户资料块 */
.usernick{
    padding: 11px 120px;
    height: 100px;
}
.usernick p{
    margin-bottom: 14px;
}
.my_id{
    width:1000px;
    height:291px;
    background:rgba(255,255,255,1);
    border-radius:5px;
    box-sizing: border-box;
    padding: 30px;
}
.myid_left{
    width: 500px;
    display: inline-block;
}   
.myid_left img{
    width: 100px;
    height: 100px;
    float: left;
} 
.myid_right{
    width:226px;
    height:98px;
    background-color: #7D4AF8;
    float: right;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 50px;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}
.userfunds{
    height: 130px;
    display: flex;
    justify-content: flex-start;
}
.userfunds div{
    height: 85px;
    padding: 45px 150px 0 20px;
}
.userfunds div p:nth-child(2){
    font-size: 28px;
    margin: 5px 0;
    font-weight: 400;
}
.userfunds div a{
    color:#666;
}
/* 订单数量 */
.oder{
    height: 100px;
    margin: 30px 0 36px 0;
    display: flex;
    justify-content: space-between;
}
.oder div{
    width: 228px;
    height: 100px;
    background-repeat: no-repeat;
}
/* 收藏模块 */
.myCollection{
    background-color: #fff;
}
.myCollection_top{
    height: 63px;
    padding: 0 29px;
    border-bottom: 1px #D2D2D2 solid;
}
.myCollection_top span{
    padding-top: 20px;
    display: inline-block;

}
.myCollection_top div{
    display: flex;
    height: 63px;
    width: 500px;
    justify-content: space-between;
    align-items: center;
    float: right;
}
.myCollection_content{
    margin: 0 30px;
}
.myCollection_content div{
    height: 180px;
    border-bottom: 1px solid #D2D2D2;
}
.collitem >div{
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.collitem>div:nth-child(1){
    width: 130px;
}
.collitem>div:nth-child(2){
    width: 230px;
    align-items:flex-start;
}
.collitem>div:nth-child(3){
    width: 200px;
}
.collitem>div:nth-child(4){
    width: 260px;
}
.collitem>div:nth-child(5){
    width: 110px;
}
.collitem p{
    margin: 3px 0;
}
.buybtn{
    width:76px;
    height:28px;
    background:rgba(248,248,248,1);
    border:1px solid rgba(210,210,210,1);
    border-radius:5px;
    font-size: 14px;
    color: #666;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
}
</style>